<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钟尚杰的个人网页</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0 auto;
        }
        a{
            text-decoration: none;
        }
        .container{
            width: 1500px;
            margin: 0 auto;
            background-color: rgb(30, 19, 14);
        }
        .self{
            background-color: #b0b0b0;
            width: 1500px;
            height: 60px;
            position: fixed;
            top: 0px;
            z-index: 10;
        }
        ul{
            position:absolute;
            margin-top: 20px;
            left: 60px;
            color: black;
            
        }
        .background{
            width: 1500px;
            /* height: 500px; */
            /* display: inline-block; */
            text-align: center;
            /* position: relative; */
        }
        .header{
            display: inline-block;
            z-index: 1;
            width: 500px;
            /* text-align: center; */
            position:relative;
            bottom: 450px;
            margin: 0 auto;
            color: rgb(255, 255, 255);
            line-height: 30px;
            transition: all 1s;
        }
        .header:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.2)
        }
        .third{
            width: 1500px;
            /* height: 700px; */
            background-color: rgb(30, 19, 14);
            position: absolute;
            top:570px;
            color: white;
            text-align: center;
        }
        .jie{
            width: 500px;
            color: white;
            background-color: rgb(30, 19, 14);
            margin-top: 30px;
        }
        h4{
            background-color: rgb(30, 19, 14);
            margin-top: 30px;
            /* margin-bottom: 50px; */
        }
        h3{
            background-color: rgb(30, 19, 14);
        }
        .shang{
            width: 1500px;
            margin-top: 40px;
            display: inline-block;
        }
        .ang{
            background-color: rgb(30, 19, 14);
            width: 1500px;
            margin-top: 60px;
            transition: all 1s;
        }
        .UI1:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .UI2:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .UI3:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .UI4:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .UI5:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .UI6:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .UI7:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .UI8:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .UI9:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .UI10:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .UI11:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .fouth{
            width: 1500px;
            background-color:  rgb(30, 19, 14);
            color: white;
            text-align: center;
            margin-top: 50px;
            display: inline-block;
            margin-bottom: 30px;
        }
        .ong{
            margin-top: 60px;
            transition: all 1s;
        }
        .ang img{
            margin-top: 30px;
        }
        .ong img{
            margin-top: 40px;
        }
        .ban1:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .ban2:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .ban3:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .ban4:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .ban5:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .ban6:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .ban7:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .ban8:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .fifth{
            width: 1500px;
            text-align: center;
            margin-top: 60px;
        }
        .je{
            margin-top:70px;
            transition: all 1s;
            margin-bottom: 100px;
        }
        .qt1:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .qt2:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .qt3:hover{
            transform: translate(1px, 1px) rotate(1deg) scale(1.3)
        }
        .sixth{
            display: inline-block;
            width: 100px;
            height: 25px;
            color: black;
            background-color: white;
            text-align: center;
            border-radius: 8%;
            margin-bottom: 30px;
            margin-top: 60px;
        }
        .six{
            width: 1500px;
            text-align: center;
            display: inline-block;
            margin-top: 60px;
            background-color: white;
            color: black;
        }
        .seven{
            display: inline-block;
            width: 300px;
            height: 25px;
            color: black;
            background-color: white;
            text-align: center;
            border-radius: 8%;
            margin-bottom: 30px;
            margin-top: 60px;
            margin-left: 70px;
        }
        .eight{
            display: inline-block;
            width: 200px;
            height: 25px;
            color: black;
            background-color: white;
            text-align: center;
            border-radius: 8%;
            margin-bottom: 30px;
            margin-top: 60px;
            margin-left: 70px;
        }
        .night{
            width: 1500px;
            height: 100px;
            color: black;
            background-color: white;
            text-align: center;
            margin-top: 60px;
            margin: 0 auto;
        }
        /* .telve{
            width: 1500px;
            height: 30px;
            color: black;
            background-color: white;
            text-align: center;
            border-radius: 8%;
            margin-bottom: 30px;
            margin-top: 60px;
            margin-left: 70px
        } */
        .my{
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="self">
            <ul>
                <a href="#one">个人链接</a>
                <a href="#two">首页</a>
                <a href="#three">作品</a>
            </ul>
        </div>
        <div class="background">
            <img src="img/首页背景.png">
            <div class="header">
                <img src="img/5489.png">
                <div class="second">
                    <a id="two">钟尚杰</a><br>
                    <a>UI Designer</a><br>
                    <a>成都东软学院</a>
                </div>
            </div>  
        </div>
        <div class="third">
            <h3>个人简介</h3>
            <div class="jie">
                <p>
                    我是一名来自青城山脚下，成都东软学院的一名学生，我在成都东软学院数字艺术系艺术与科技专业
                    学习了相关的专业技能。<br>
                    本人性格比较开朗，相处起来比较慢热。对朋友或者熟悉的人比较热情，也是乐于助人，有过三好学生奖状
                    ，曾经扶过老奶奶过马路、公交车给老人让座。得到了许多人的表扬。
                </p>
            </div>
            <div class="shang">
                <h3 id="three">个人作品展示</h3>
                <h4>UI 设计展示</h2>
                    <div class="ang">
                        <marquee scrollamount="15" scrolldelay="10" direction= "right" width="800" height="400" onMouseMove="this.stop();" onMouseOut="this.start();">
                            <img class="UI1" src="UI/5.png" width="300" height="300" />
                            <img class="UI2" src="UI/6.png" width="300" height="300" />
                            <img class="UI3" src="UI/1.png" width="300" height="300">
                            <img class="UI4" src="UI/7.png" width="300" height="300" />
                            <img class="UI5" src="UI/2.png" width="300" height="300">
                            <img class="UI6" src="UI/8.png" width="300" height="300" />
                            <img class="UI7" src="UI/3.png" width="300" height="300">
                            <img class="UI8" src="UI/4.png" width="300" height="300">
                            <img class="UI9" src="UI/9.png" width="300" height="300">
                            <img class="UI10" src="UI/10.png" width="300" height="300">
                            <img class="UI11" src="UI/11.png" width="300" height="300">
                         </marquee>
                    
            </div>
        </div>
        <div class="fouth">
            <h4>版式设计展示 </h4>
            <div class="ong">
                <marquee direction="right" scrollamount="15" scrolldelay="10" direction= "right" width="800" height="400" onMouseMove="this.stop();" onMouseOut="this.start();">
                    <img class="ban1" src="bans/14.jpg" width="400" height="300" />
                    <img class="ban2" src="bans/8.jpg" width="400" height="300" />
                    <img class="ban3" src="bans/封面.jpg" width="400" height="300" />
                    <img class="ban4" src="bans/4.jpg" width="400" height="300" />
                    <img class="ban5" src="bans/6.jpg" width="400" height="300" />
                    <img class="ban6" src="bans/16.jpg" width="400" height="300" />
                    <img class="ban7" src="bans/1.jpg" width="400" height="300" />
                    <img class="ban8" src="bans/17.jpg" width="400" height="300" />
                    
                </marquee>
                
            </div>
        </div>
        <div class="fifth">
            <h4>其他作业展示</h4>
            <div class="je">
                <img class="qt1" src="img/32.jpg" width="18%" height="18%">
                <img class="qt2" src="img/33.jpg" width="20%" height="20%">
                <img class="qt3" src="img/5684.jpg" width="19%" height="19%">
            </div>
        </div>
        <div class="my">
            <div class="six">
                <h2 id="one">个人链接</h2>
                <div class="sixth">
                    <a href="https://user.qzone.qq.com/1652725985/main">QQ空间</a>
                </div>
                <div class="seven">
                    <a href="https://mail.qq.com/cgi-bin/frame_html?sid=3D2IiRFoGphAUjBv&r=2411c2380d15e88ad6cd5a8377c2c35e">QQ邮箱：1652725985@qq.com</a>
                </div>
                <div class="eight">
                    <a>QQ:1652725985</a>
                </div>
            </div>
            <div class="night">
                <a>电话号码：13076073632</a>
                    <br>
                <br><a>微信：13076073632</a>
            </div>
            <!-- <div class="telve">
                <a>微信：13076073632</a>
            </div> -->
        </div>
    </div>
</body>
</html>